<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <ui:composition template="/template.xhtml">
        <ui:define name="title">
            <h:outputText value="Unidades"></h:outputText>
        </ui:define>
        <ui:define name="cuerpo">
            <p:growl id="message" showDetail="true" />
            <h:form id="form">
                <p:growl id="validacionMensaje" showDetail="true" autoUpdate="true"/>
                <p:panel header="Administración de Unidades" style="font-size: small">
                    <table width="100%" border="0" >
                        <p:commandButton value="Crear" style="font-size: small" 
                                         action="#{unidadBean.cargarNuevo()}" 
                                         icon="ui-icon-circle-plus"
                                         update="@form:dlDialog" oncomplete="PF('dlDialogVar').show()"
                                         process="@this">
                        </p:commandButton>        
                    </table>

                    <p:dataTable id="dtUnidades" var="unidadItem" value="#{unidadBean.unidades}" widgetVar="tablaUnidades"                                                                  
                                 emptyMessage="No existen datos" sortMode="multiple"
                                 style="margin-top: 10px; font-size: x-small; text-align: center"                                
                                 paginator="true" rows="10" rowKey="#{unidadItem.codUnidad}">

                        <f:facet name="header">
                            <p:outputPanel>
                                <h:outputText value="Buscar por todos los criterios:" />
                                <p:inputText id="globalFilter" onkeyup="PF('tablaUnidades').filter()" 
                                             style="width:200px" placeholder="Ingrese la palabra clave"/>
                            </p:outputPanel>
                        </f:facet> 

                        <p:column headerText="Tipo" filterBy="#{unidadItem.codTipoUnidad.nombre}" 
                                  sortBy="#{unidadItem.codTipoUnidad.nombre}">
                            <p:outputLabel value="#{unidadItem.codTipoUnidad.nombre}"/>
                        </p:column>
                        

                        <p:column headerText="Número de bus" filterBy="#{unidadItem.numBus}"
                                  filterMatchMode="contains" sortBy="#{unidadItem.numBus}">
                            <f:facet name="filter">
                                <p:spinner onchange="PF('tablaUnidades').filter()" styleClass="year-spinner">
                                    <f:converter converterId="javax.faces.Integer" />
                                </p:spinner>
                            </f:facet>
                            <p:outputLabel value="#{unidadItem.numBus}"/>
                        </p:column>

                        <p:column headerText="Habilitación" filterBy="#{unidadItem.habilitacion}"
                                  sortBy="#{unidadItem.habilitacion}">

                            <p:outputLabel value="#{unidadItem.habilitacion}"/>
                        </p:column>

                        <p:column headerText="Placa" filterBy="#{unidadItem.placa}"
                                  filterMatchMode="contains" sortBy="#{unidadItem.placa}">
                            <p:outputLabel value="#{unidadItem.placa}"/>
                        </p:column>

                        <p:column headerText="Carrocería" filterBy="#{unidadItem.carroceria}"
                                  sortBy="#{unidadItem.carroceria}">
                            <p:outputLabel value="#{unidadItem.carroceria}"/>
                        </p:column>
                    
                        <p:column headerText="Kilometraje" sortBy="#{unidadItem.kilometraje}">
                            <p:outputLabel value="#{unidadItem.kilometraje}"/>
                        </p:column>

                        <p:column headerText="Herramientas" >                                                        
                            <div align="center">

                                <p:commandButton value="Modificar" action="#{unidadBean.cargarModificar()}" update="@form:dlDialog" 
                                                 oncomplete="PF('dlDialogVar').show()" process="@this">
                                    <f:setPropertyActionListener value="#{unidadItem}" target="#{unidadBean.unidad}" />
                                </p:commandButton>  | 

                                <p:commandButton value="Detalles" action="#{unidadBean.cargarDetalles()}" update="@form:dlDialog:" 
                                                 oncomplete="PF('dlDialogVar').show()" process="@this">
                                    <f:setPropertyActionListener value="#{unidadItem}" target="#{unidadBean.unidad}" />
                                </p:commandButton>                                

                            </div>
                        </p:column> 
                    </p:dataTable>
                </p:panel>

                <p:dialog id="dlDialog" resizable="false" header="#{unidadBean.tituloDialogo}"  appendTo="@(body)"
                          widgetVar="dlDialogVar" modal="true" showEffect="fade" hideEffect="fade" dynamic="true">

                    <p:panel id="dlUnidad" style="font-size: small;">
                        <p:panelGrid columns="3" rendered="#{not empty unidadBean.unidad}" 
                                     columnClasses="label,value,message" style="margin: 0 auto;">
                            <p:outputLabel for="cboTipoUnidad" value="Tipo de unidad:"/>
                            <p:selectOneMenu id="cboTipoUnidad" filter="true" filterMatchMode="contains" 
                                             value="#{unidadBean.unidad.codTipoUnidad}"
                                             required="true"
                                             converter="#{tipoUnidadConverter}"
                                             styleClass="menu" panelStyleClass="panel"
                                             style="width: 210px; font-size: small;" disabled="#{unidadBean.soloLectura}">
                                <f:selectItem itemLabel="Seleccione..." itemValue="#{null}" noSelectionOption="true" />
                                <f:selectItems value="#{unidadBean.tipoUnidades}" var="tipoUnidad"
                                               itemLabel="#{tipoUnidad.nombre}" itemValue="#{tipoUnidad}"/>
                            </p:selectOneMenu>
                            <p:tooltip style="font-size: small;" for="cboTipoUnidad" 
                                       value="Elegir el tipo de unidad que tendrá el vehículo" />

                            <p:outputLabel value="Marca:"/>
                            <p:selectOneMenu id="cboMarcaBus" filter="true" filterMatchMode="contains" 
                                             value="#{unidadBean.unidad.codMarcabus}"
                                             converter="#{marcaBusConverter}"
                                             styleClass="menu" panelStyleClass="panel"
                                             style="width: 210px; font-size: small;" disabled="#{unidadBean.soloLectura}">
                                <f:selectItem itemLabel="Seleccione..." itemValue="#{null}" noSelectionOption="true" />
                                <f:selectItems value="#{unidadBean.marcaBuses}" var="marcaBus"
                                               itemLabel="#{marcaBus.nombre}" itemValue="#{marcaBus}"/>
                            </p:selectOneMenu>
                            <p:tooltip style="font-size: small;" for="cboMarcaBus" 
                                       value="Elegir la marca del vehículo" />

                            <p:outputLabel for="spNumeroBus" value="Número de bus:"/>
                            <p:spinner id="spNumeroBus" value="#{unidadBean.unidad.numBus}"
                                       readonly="#{unidadBean.soloLectura}"
                                       requiredMessage="El campo 'Número de bus' es requerido"
                                       styleClass="year-spinner" style="width: 210px" required="true">
                                <f:converter converterId="javax.faces.Integer" />
                            </p:spinner>
                            <p:tooltip style="font-size: small;" for="spNumeroBus" 
                                       value="Ingresar sólo números" />

                            <p:outputLabel value="Habilitación"/>
                            <p:inputText id="txtHabilitacion" value="#{unidadBean.unidad.habilitacion}" title="Habilitacion" 
                                         style="width: 200px"
                                         readonly="#{unidadBean.soloLectura}"/>
                            <p:outputLabel value=""/>

                            <p:outputLabel value="Placa"/>
                            <p:inputText id="txtPlaca" value="#{unidadBean.unidad.placa}" title="Placa" 
                                         style="width: 200px" onkeyup="value=value.toUpperCase()"
                                         readonly="#{unidadBean.soloLectura}"/>
                            <p:outputLabel value=""/>

                            <p:outputLabel for="spFabricacion" value="Año de fabricación:"/>
                            <p:spinner id="spFabricacion" value="#{unidadBean.unidad.anioFabricacion}" 
                                       readonly="#{unidadBean.soloLectura}"
                                       styleClass="year-spinner" style="width: 210px" required="true"
                                       requiredMessage="El campo 'Año de fabricación' es requerido">
                                <f:converter converterId="javax.faces.Integer" />
                            </p:spinner>
                            <p:tooltip style="font-size: small;" for="spFabricacion" 
                                       value="Ingresar sólo números" />

                            <p:outputLabel value="Chasis"/>
                            <p:inputText id="txtChasis" value="#{unidadBean.unidad.chasis}" title="Chasis" 
                                         style="width: 200px"
                                         readonly="#{unidadBean.soloLectura}"/>
                            <p:outputLabel value=""/>

                            <p:outputLabel value="Motor"/>
                            <p:inputText id="txtMotor" value="#{unidadBean.unidad.motor}" title="Motor" 
                                         style="width: 200px"
                                         readonly="#{unidadBean.soloLectura}"/>
                            <p:outputLabel value=""/>

                            <p:outputLabel value="Carrocería"/>
                            <p:inputText id="txtCarroceria" value="#{unidadBean.unidad.carroceria}" title="Carroceria" 
                                         style="width: 200px"
                                         readonly="#{unidadBean.soloLectura}"/>
                            <p:outputLabel value=""/>

                            <p:outputLabel for="spCapacidad" value="Capacidad:"/>
                            <p:spinner id="spCapacidad" value="#{unidadBean.unidad.capacidad}" 
                                       readonly="#{unidadBean.soloLectura}"
                                       styleClass="year-spinner" style="width: 210px" 
                                       required="true" requiredMessage="El campo 'Capacidad' es requerido">
                                <f:converter converterId="javax.faces.Integer" />
                            </p:spinner>
                            <p:tooltip style="font-size: small;" for="spCapacidad" 
                                       value="Ingresar sólo números" />

                            <p:outputLabel for="spNumPuertas" value="Número de puertas:"/>
                            <p:spinner id="spNumPuertas" value="#{unidadBean.unidad.numPuertas}" 
                                       styleClass="year-spinner" style="width: 210px" required="true"
                                       readonly="#{unidadBean.soloLectura}"
                                       requiredMessage="El campo 'Número de puertas' es requerido">
                                <f:converter converterId="javax.faces.Integer" />
                            </p:spinner>
                            <p:tooltip style="font-size: small;" for="spCapacidad" 
                                       value="Ingresar sólo números" />

                            <p:outputLabel for="spNumPuertasIzq" value="Número de puertas izquierdas:"/>
                            <p:spinner id="spNumPuertasIzq" value="#{unidadBean.unidad.numPuertasIzq}" 
                                       readonly="#{unidadBean.soloLectura}"
                                       styleClass="year-spinner" style="width: 210px" required="true"
                                       requiredMessage="El campo 'Números de puertas izquierda' es requerido">
                                       <f:converter converterId="javax.faces.Integer" />
                            </p:spinner>
                            <p:tooltip style="font-size: small;" for="spCapacidad" 
                                       value="Ingresar sólo números" />

                            <p:outputLabel for="cFechaSoat" value="Fecha caduda SOAT:"/>
                            <p:calendar id="cFechaSoat" locale="es" timeZone="America/Guayaquil"
                                        readonly="#{unidadBean.soloLectura}"
                                        value="#{unidadBean.unidad.fechaCreacion}" 
                                        pattern="dd/MM/yyyy"/>
                            <p:outputLabel value=""/>

                            <p:outputLabel for="spKilometraje" value="Kilometraje:"/>
                            <p:spinner id="spKilometraje" value="#{unidadBean.unidad.kilometraje}" 
                                       readonly="#{unidadBean.soloLectura}"
                                       styleClass="year-spinner" style="width: 210px" required="true"
                                       requiredMessage="El campo 'Kilometraje' es requerido">
                                <f:converter converterId="javax.faces.Integer" />
                            </p:spinner>
                            <p:tooltip style="font-size: small;" for="spKilometraje" 
                                       value="Ingresar sólo números" />
                        </p:panelGrid>
                        <br/>
                        <div align="center">
                            <p:commandButton rendered="#{unidadBean.activarNuevo}" 
                                             update=":form:dtUnidades,@form:dlDialog:dlUnidad"
                                             icon="ui-icon-disk"
                                             action="#{unidadBean.guardar()}" 
                                             partialSubmit="true" process="@form:dlDialog"
                                             value="Guardar" >                                  
                                <p:confirm header="Confirmación" message="Esta seguro de guardar este registro?" icon="ui-icon-alert" />
                            </p:commandButton>                                
                        </div>
                        <div align="center">
                            <p:commandButton  rendered="#{unidadBean.activarModificar}" 
                                              update=":form:dtUnidades,@form:dlDialog:dlUnidad"
                                              icon="ui-icon-pencil"
                                              action="#{unidadBean.modificar()}" 
                                              partialSubmit="true" process="@form:dlDialog"  
                                              value="Modificar">                                  
                                <p:confirm header="Confirmación" message="Esta seguro de modificar este registro?" icon="ui-icon-alert" />
                            </p:commandButton>                                  
                        </div> 
                    </p:panel>
                </p:dialog>
                <p:confirmDialog style="font-size: small" global="true" showEffect="fade" hideEffect="fade">
                    <p:commandButton value="Si" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
                    <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
                </p:confirmDialog>
            </h:form>
        </ui:define>
    </ui:composition>
</html>
